<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
		        </view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item>
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('await')">
					<!--开票-->
					<view v-for="(item,index) in awaitInvoiceList" :key="index" style="background-color: #ffffff;display: flex;flex-direction: column;padding: 10px;border-bottom: 1px solid #ededed;margin: 15px;">
						<view style="display: flex;justify-content: space-between;">
							<span>
								<text>{{item.outCode}}</text>
								<text style="margin-left: 10px;color: #eb884c;">{{waybillStatus_[item.status]}}</text>
							</span>
							<text style="color: #fc7a7a;font-weight: bold;font-size: 15px;">￥{{item.payableTotalFee.toFixed(2)}}</text>
						</view>
						<view style="display: flex;justify-content: space-between;color: #6f6f6f;">
							<span style="display: flex;flex-direction: column;">
								<text>{{item.shipName}}</text>
								<text style="font-weight: bold;">{{item.shipDistrictName}}</text>
							</span>
							<text style="display: flex;align-items: center;">→</text>
							<span style="display: flex;flex-direction: column;">
								<text>{{item.deliveryName}}</text>
								<text style="font-weight: bold;">{{item.deliveryDistrictName}}</text>
							</span>
						</view>
						<view v-for="(item2,index2) in item.goodSourceList" :key="index2" style="display: flex;font-size: 12px;margin: 5px 0;">
							<text>{{item2.goodsName}}</text>
							<text style="margin-left: 5px;">{{item2.num}}件、{{item2.weight}}吨、{{item2.bulk}}立方米</text>
						</view>
						<view  style="display: flex;justify-content: space-between;font-size: 13px;">
							<text style="font-weight: bold;">待开票</text>
							<span style="display: flex;text-align: center;">
								<view @click="onNoInvoice(item)" hover-class="buttonHover"
									style="margin-left: 10px;width: 60px;text-align: center;border: 1rpx solid #6f6f6f;color:#6f6f6f;border-radius: 8px;font-size: 12px;">
									暂不开票</view>
								<view @click="onMakeInvoice(item)" hover-class="buttonHover"
									style="margin-left: 10px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">
									预录发票</view>
							</span>
						</view>
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('await')"></uni-load-more>
					<view style="height: 100px;"></view>
		        </scroll-view>
		    </swiper-item>
			<!--暂不开票-->
			<swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('no')">
					<view v-for="(item,index) in noInvoiceList" :key="index" style="background-color: #ffffff;display: flex;flex-direction: column;padding: 10px;border-bottom: 1px solid #ededed;margin: 15px;">
						<view style="display: flex;justify-content: space-between;">
							<span>
								<text>{{item.outCode}}</text>
								<text style="margin-left: 10px;color: #eb884c;">{{waybillStatus_[item.status]}}</text>
							</span>
							<text style="color: #fc7a7a;font-weight: bold;font-size: 15px;">￥{{item.payableTotalFee.toFixed(2)}}</text>
						</view>
						<view style="display: flex;justify-content: space-between;color: #6f6f6f;">
							<span style="display: flex;flex-direction: column;">
								<text>{{item.shipName}}</text>
								<text style="font-weight: bold;">{{item.shipDistrictName}}</text>
							</span>
							<text style="display: flex;align-items: center;">→</text>
							<span style="display: flex;flex-direction: column;">
								<text>{{item.deliveryName}}</text>
								<text style="font-weight: bold;">{{item.deliveryDistrictName}}</text>
							</span>
						</view>
						<view v-for="(item2,index2) in item.goodSourceList" :key="index2" style="display: flex;font-size: 12px;margin: 5px 0;">
							<text>{{item2.goodsName}}</text>
							<text style="margin-left: 5px;">{{item2.num}}件、{{item2.weight}}吨、{{item2.bulk}}立方米</text>
						</view>
						<view  style="display: flex;justify-content: space-between;font-size: 13px;">
							<text style="font-weight: bold;">暂不开票</text>
							<span style="display: flex;text-align: center;">
								<view @click="onAwaitInvoice(item)" hover-class="buttonHover"
									style="margin-left: 10px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">
									待开票</view>
							</span>
						</view>
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('no')"></uni-load-more>
					<view style="height: 100px;"></view>	
			    </scroll-view>
			</swiper-item>
			
			<!--开票记录-->
			<!-- <swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('record')">
					
					<view v-for="(item,index) in invoiceRecordList" :key="index" style="background-color: #ffffff;display: flex;flex-direction: column;padding: 10px;border-bottom: 1px solid #ededed;margin: 15px;">
						<view style="display: flex;justify-content: space-between;">
							<span>
								<text>{{item.batchNo}}</text>
								<text style="margin-left: 10px;color: #eb884c;">{{invoicetype_[item.type]}}</text>
							</span>
							<text style="color: #fc7a7a;font-weight: bold;font-size: 15px;">￥{{item.invoiceTotal.toFixed(2)}}</text>
						</view>
						<view style="display: flex;color: #6f6f6f;">
							<span style="display: flex;flex-direction: column;">
								<text>公司名称：{{item.companyName}}</text>
								<text>公司地址：{{item.companyAddress}}</text>
								<text>关联运单：{{item.outCode}}</text>
								<text>接收邮箱：{{item.email}}</text>
								<text>申请时间：{{item.applyTime}}</text>
							</span>
						</view>
						<view style="display: flex;justify-content: space-between;font-size: 13px;margin-top: 5px;">
							<span style="display: flex;flex-direction: column;text-align: center;">
								<text style="font-weight: bold;">{{invoiceStatus_[item.status]}}</text>
							</span>
							<span style="display: flex;align-items: center;">
								<view @click="onSendEmail(item)" hover-class="buttonHover"
									style="margin-left: 10px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">
									发送邮件</view>
								<view @click="onAgainMakeInvoice(item)" hover-class="buttonHover"
									style="margin-left: 10px;width: 60px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">
									重新开票</view>
								<view @click="onCancle(item)" hover-class="buttonHover"
									style="margin-left: 10px;width: 40px;text-align: center;border: 1rpx solid #bf5f09;color:#bf5f09;border-radius: 8px;font-size: 12px;">
									作废</view>
							</span>
						</view>
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('record')"></uni-load-more>
					<view style="height: 100px;"></view>
			    </scroll-view>
			</swiper-item> -->
			
			<!--作废发票-->
			<!-- <swiper-item>
			    <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" @scrolltolower="scrolltolower('cancellation')">

					<view v-for="(item,index) in cancellationList" :key="index" style="background-color: #ffffff;display: flex;flex-direction: column;padding: 10px;border-bottom: 1px solid #ededed;margin: 15px;">
						<view style="display: flex;justify-content: space-between;">
							<span>
								<text>{{item.batchNo}}</text>
								<text style="margin-left: 10px;color: #c7c9ce;">{{invoicetype_[item.type]}}</text>
							</span>
							<text style="color: #c7c9ce;font-weight: bold;font-size: 15px;">￥{{item.invoiceTotal.toFixed(2)}}</text>
						</view>
						<view style="display: flex;color: #6f6f6f;">
							<span style="display: flex;flex-direction: column;">
								<text>公司名称：{{item.companyName}}</text>
								<text>公司地址：{{item.companyAddress}}</text>
							</span>
						</view>
						<view style="display: flex;color: #6f6f6f;">
							<span style="display: flex;flex-direction: column;">
								<text>关联运单：{{item.outCode}}</text>
								<text>接收邮箱：{{item.email}}</text>
							</span>
						</view>
						<view  style="display: flex;justify-content: space-between;font-size: 13px;margin-top: 5px;">
							<span style="display: flex;flex-direction: column;text-align: center;">
								<text style="font-weight: bold;">{{invoiceStatus_[item.status]}}</text>
							</span>
							<span style="display: flex;flex-direction: column;text-align: center;">
								<text>{{item.applyTime}}</text>
							</span>
						</view>
					</view>
					<uni-load-more status="more" :status="loadMoreStatus" @clickLoadMore="scrolltolower('cancellation')"></uni-load-more>
					<view style="height: 100px;"></view>	
			    </scroll-view>
			</swiper-item> -->
		</swiper>
		<!--开票-->
		<MakeInvoice ref="makeInvoice" />
		<SendEmail ref="sendEmail" />
	</div>
</template>

<script>
	import {
		getWayBillList,
	} from '@/api/system/waybill.js'
	import{
		invoiceList,
		obsolete,
		noNeed,
		recover
	} from '@/api/system/invoice.js'
	import {getDicts} from '@/api/system/dict.js'
	import MakeInvoice from './components/makeInvoice.vue'
	import SendEmail from './components/sendEmail.vue'
	export default {
		components: {
			MakeInvoice,
			SendEmail
		},
		data() {
			return {
				//itemsArr: ['开票','开票记录','作废发票'],
				itemsArr: ['开票','暂不开票'],
				 tabIndex: 0,
				 scrollH: 700,
				 scrollInto: '',
				 //待开票列表
				 awaitInvoiceList:[],
				 //开票记录列表
				 invoiceRecordList:[],
				 //作废发票列表
				 cancellationList:[],
				 //暂不开票列表
				 noInvoiceList:[],
				 //运单状态
				 waybillStatus_:[],
				 
				 //等待开票列表页面大小
				 pageNum_await:10,
				 pageNum_record:10,
				 pageNum_cancellation:10,
				 pageNum_no:10,
				 //上拉触底节流标识
				 flag:true,
				 //加载更多
				 loadMoreStatus:'more',
				 
				 //发票类型
				 invoicetype_:[],
				 //发票状态
				 invoiceStatus_:[]
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		created() {
			//加载运单状态
			getDicts('waybill_status').then(res=>{
				res.data.forEach(item=>{
					this.waybillStatus_[item.dictValue]=item.dictLabel
				})
			})
			//加载发票类型
			getDicts('invoice_type').then(res=>{
				res.data.forEach(item=>{
					this.invoicetype_[item.dictValue]=item.dictLabel
				})
			})
			//加载发票状态
			getDicts('invoice_status').then(res=>{
				res.data.forEach(item=>{
					this.invoiceStatus_[item.dictValue]=item.dictLabel
				})
			})
			this.getAwaitInvoiceList()
		},
		methods: {
			// 触底的时候请求数据，即为上拉加载更多
			scrolltolower(name){
				this.loadMoreStatus='loading'
				if(this.flag){
				    setTimeout(()=>{
						if(name==='await'){
							this.pageNum_await+=10;
							this.getAwaitInvoiceList()
						}
				        else if(name==='record'){
							this.pageNum_record+=10;
							this.getInvoiceRecord()
						}
						else if(name==='cancellation'){
							this.pageNum_cancellation+=10;
							this.getCancellation()
						}
						else if(name==='no'){
							this.pageNum_no+=10;
							this.getNoInvoiceList()
						}
				        this.flag = true;
				    },1000);
				}
				this.flag = false;
			},
			// 切换选项
			changeTab(index) {
			    if (this.tabIndex === index) {
			        return;
			    }
			    this.tabIndex = index;
			    // 滚动到指定元素
			    this.scrollInto = 'tab' + index;
				switch (index) {
					case 0:
						//加载待开发票列表
						this.getAwaitInvoiceList()
						break;
					case 1:
						//加载暂不发票列表
						this.getNoInvoiceList()
						break;
					// case 1:
					// 	//加载发票记录列表
					// 	this.getInvoiceRecord()
					// 	break;
					// case 2:
					// 	//加载作废发票列表
					// 	this.getCancellation()
					// 	break;
					default:
						break;
				}
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title:'正在加载',
				})
				// setTimeout(function() {
				// 	uni.hideLoading()
				// }, 500);
			    this.changeTab(e.detail.current);
			},
			//获取待开发票列表
			async getAwaitInvoiceList() {
				//invoiceStatus 开票状态：0.未开票 1.已开票 2.开票失败 3.暂不开票
				await getWayBillList({pageNum:1,pageSize:this.pageNum_await,invoiceStatus:0}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.awaitInvoiceList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_await?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//获取发票记录列表
			async getInvoiceRecord() {
				//状态：0.开票中 1.已开票 2.已作废
				await invoiceList({pageNum:1,pageSize:this.pageNum_record,status:1}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.invoiceRecordList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_record?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//获取作废发票列表
			async getCancellation() {
				//状态：0.开票中 1.已开票 2.已作废
				await invoiceList({pageNum:1,pageSize:this.pageNum_cancellation,status:2}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.cancellationList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_cancellation?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//获取待开发票列表
			async getNoInvoiceList() {
				//invoiceStatus 开票状态：0.未开票 1.已开票 2.开票失败 3.暂不开票
				await getWayBillList({pageNum:1,pageSize:this.pageNum_no,invoiceStatus:3}).then(res => {
					uni.hideLoading()
					if (res.code == '200') {
						this.noInvoiceList = res.rows
						this.loadMoreStatus=res.rows.length===this.pageNum_no?'more':'noMore'
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			//开票
			onMakeInvoice(item){
				this.$refs.makeInvoice.invoiceDialog(item)
			},
			//发送邮件
			onSendEmail(item){
				this.$refs.sendEmail.sendEmailDialog(item)
			},
			//重新开票
			onAgainMakeInvoice(item){
				this.$refs.makeInvoice.cancelInvoiceDialog(item)
			},
			//作废
			onCancle(item){
				let that=this
				uni.showModal({
					title: '提示',
					content: `确认作废开票批次号为"${item.batchNo}"的发票？`,
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在作废...',
							})
							obsolete(item.id).then(res2 => {
								uni.hideLoading()
								if (res2.code == '200') {
									uni.showToast({
										icon: 'none',
										title: '作废成功'
									})
									
									//重新加载开票记录列表
									that.getInvoiceRecord()
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.msg
									})
								}
							})
						}
					}
				});
			},
			//设置为暂不开票
			onNoInvoice(item){
				let that=this
				uni.showModal({
					title: '提示',
					content: `确认设置运单编号为"${item.outCode}"的数据暂不开票？`,
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在设置...',
							})
							noNeed({waybillIds:[item.waybillId]}).then(res2 => {
								uni.hideLoading()
								if (res2.code == '200') {
									uni.showToast({
										icon: 'none',
										title: '暂不开票成功'
									})
									
									//重新加载待开票列表
									that.getAwaitInvoiceList()
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.msg
									})
								}
							})
						}
					}
				});
			},
			//设置为待开票
			onAwaitInvoice(item){
				let that=this
				uni.showModal({
					title: '提示',
					content: `确认将运单编号为"${item.outCode}"的数据转为待开票？`,
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '正在设置...',
							})
							recover({waybillIds:[item.waybillId]}).then(res2 => {
								uni.hideLoading()
								if (res2.code == '200') {
									uni.showToast({
										icon: 'none',
										title: '转为待开票成功'
									})
									
									//重新加载暂不开票列表
									that.getNoInvoiceList()
								} else {
									uni.showToast({
										icon: 'none',
										title: res2.msg
									})
								}
							})
						}
					}
				});
			}
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 50vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}

.buttonHover{
	opacity: 0.6;
}
::v-deep .uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
		background-color: rgb(157, 81, 38);
		border-radius: 0 0 11px 0;
		/* color: white; */
	}

	::v-deep .uni-button-color {
		color: #ffffff;
	}
</style>